import React from 'react'
import { useTheme } from '../contexts/ThemeContext'
import ThemeToggle from './ThemeToggle'

const ThemedHeader = () => {
  const { theme } = useTheme()
  
  return (
    <header style={{
      padding: '16px 24px',
      backgroundColor: theme.colors.background,
      borderBottom: `1px solid ${theme.colors.border}`,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    }}>
      <h1 style={{
        color: theme.colors.text,
        margin: 0,
        fontSize: '20px'
      }}>
        HiUI 主题切换应用
      </h1>
      <ThemeToggle />
    </header>
  )
}

export default ThemedHeader